
Security News
NIST Under Federal Audit for NVD Processing Backlog and Delays
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
react-resizable
Advanced tools
The react-resizable package provides a set of React components that can be used to create resizable elements. It is particularly useful for building user interfaces where elements need to be resized by the user, such as in dashboards, forms, or any interactive layout.
Resizable Component
The ResizableBox component allows you to create a resizable element. You can specify constraints such as minimum and maximum width and height.
import React from 'react';
import { ResizableBox } from 'react-resizable';
const ResizableComponent = () => (
<ResizableBox width={200} height={200} minConstraints={[100, 100]} maxConstraints={[300, 300]}>
<div style={{ width: '100%', height: '100%', border: '1px solid black' }}>
Resizable Content
</div>
</ResizableBox>
);
export default ResizableComponent;
Resizable Handle
The ResizableBox component can also accept a custom handle for resizing. This allows for more control over the appearance and behavior of the resize handle.
import React from 'react';
import { ResizableBox } from 'react-resizable';
const ResizableHandleComponent = () => (
<ResizableBox
width={200}
height={200}
minConstraints={[100, 100]}
maxConstraints={[300, 300]}
handle={<span className="custom-handle" />}
handleSize={[8, 8]}
>
<div style={{ width: '100%', height: '100%', border: '1px solid black' }}>
Resizable Content with Custom Handle
</div>
</ResizableBox>
);
export default ResizableHandleComponent;
The react-rnd package provides resizable and draggable components. It offers more flexibility by combining both resizing and dragging functionalities in one package. Compared to react-resizable, react-rnd is more feature-rich and allows for more complex interactions.
The react-grid-layout package is a grid layout system for React that allows for both resizing and dragging of grid items. It is particularly useful for creating complex, responsive grid layouts. While react-resizable focuses solely on resizing, react-grid-layout provides a more comprehensive solution for grid-based layouts.
The re-resizable package is another alternative for creating resizable components in React. It offers a similar API to react-resizable but includes additional features such as support for resizing in all directions and more customization options. It is a good alternative if you need more control over the resizing behavior.
A simple widget that can be resized via one or more handles.
You can either use the <Resizable>
element directly, or use the much simpler <ResizableBox>
element.
See the example and associated code in TestLayout and ResizableBox for more details.
Make sure you use the associated styles in /css/styles.css, as without them, you will have problems with handle placement and visibility.
You can pass options directly to the underlying DraggableCore
instance by using the prop draggableOpts
.
See the demo for more on this.
Using npm:
$ npm install --save react-resizable
const Resizable = require('react-resizable').Resizable; // or,
const ResizableBox = require('react-resizable').ResizableBox;
// ES6
import { Resizable, ResizableBox } from 'react-resizable';
// ...
render() {
return (
<ResizableBox width={200} height={200} draggableOpts={{...}}
minConstraints={[100, 100]} maxConstraints={[300, 300]}>
<span>Contents</span>
</ResizableBox>
);
}
These props apply to both <Resizable>
and <ResizableBox>
. Unknown props that are not in the list below will be passed to the child component.
{
children: React.Element<any>,
width: number,
height: number,
// Either a ReactElement to be used as handle, or a function returning an element that is fed the handle's location as its first argument.
handle: ReactElement<any> | (resizeHandle: 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne') => ReactElement<any>,
// If you change this, be sure to update your css
handleSize: [number, number] = [10, 10],
lockAspectRatio: boolean = false,
axis: 'both' | 'x' | 'y' | 'none' = 'both',
minConstraints: [number, number] = [10, 10],
maxConstraints: [number, number] = [Infinity, Infinity],
onResizeStop?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
draggableOpts?: ?Object,
resizeHandles?: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
};
The following props can also be used on <ResizableBox>
:
{
style?: Object
}
If a width
or height
is passed to <ResizableBox>
's style
prop, it will be ignored as it is required for internal function.
FAQs
A component that is resizable with handles.
The npm package react-resizable receives a total of 1,321,582 weekly downloads. As such, react-resizable popularity was classified as popular.
We found that react-resizable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.
Security News
TypeScript Native Previews offers a 10x faster Go-based compiler, now available on npm for public testing with early editor and language support.